var vue = new Vue({
	el: '#pageDiv',
	data :{
		  //关联看板的ID
		  pollingConfigId : $("#pollingConfigId").val(),
		  //list tabel 绑定数据
		  tableData : [],
		  configTableData :[],
		  //穿梭框左侧
		  transferData: [],
		  //穿梭框右侧
		  transferValue: [],
		  loading: false,
		  dialogEdit:false,
		  dialogAdd:false,
		  //跳转
		  toListUrl:COMMON_URL.URL+'config/toConfigListByPoolingConfigId?id=',
		  //查询
		  queryUrl:COMMON_URL.URL+'config/getConfigListByPoolingConfigId',
		  //编辑
		  editUrl:COMMON_URL.URL+'config/edit',
		  //删除
		  deleteUrl:COMMON_URL.URL+'config/delete',
		  //查询素材
		  queryMaterialUrl: COMMON_URL.URL+'material/list',
		  //新增
		  addConfigListUrl : COMMON_URL.URL + "config/add",
		  //根据Id查询素材详情
		  findMaterialByIdUrl: COMMON_URL.URL+'material/getMateriaById',
		  //发布
		  configPushUrl: COMMON_URL.URL+'config/configPushById',
		  //撤回
		  configRejectUrl: COMMON_URL.URL+'config/configRejectById',
		  //修改的form表单对象
		  editConfig:{
			  id:'',
			  showType:'',
			  showTypeDesc:'',
			  pollingConfigId:'',
			  hour:'',
			  minute :'',
			  second:'',
			  showDuration:'',
			  showOrder:'',
			  tableTimer:'',
			  materialName:'',
			  materialId:''
		  }
	},
	methods:{
		//查询看板配置数据
		loadConfigData(){
			$.ajax({
				url : this.queryUrl,
				dataType : 'json',
				type : 'get',
				data : {
					id:vue.pollingConfigId
				},
				success : function(data){
					if(data.ok){
						var value = data.data;
						vue.tableData = value;
					}
				}
			});
		},
		//查询素材列表
		loadMaterialDate(){
			//清空穿梭框左右右侧数据
			vue.transferData=[];
			vue.transferValue=[];
			//清空table数据
			vue.configTableData =[];
			$.ajax({
				url : this.queryMaterialUrl,
				type : 'get',
				dataType : 'json',
				async:false,
				success : function(data){
					var value = data.data;
					for(var i=0;i<=value.length-1;i++){
						vue.transferData.push({
							label: value[i].name,
				            key: value[i].id
						})
					}
				}
			});
		},
		//跳转到新页面  （使用于带参数的链接）
	    openTab(url,val){
		    $.get(url+val,function(data){
				$('#mainApp').html(data);
		    });
	    },
		//穿梭框查询搜索方法
		filterMethod(query, item) {
			//这里可以自定义查询方法
	        return item.label.indexOf(query) > -1;
	    },
	    //穿梭框事件
	    changeMaterial(){
	    	//清空table数据
	    	vue.configTableData=[];
	    	//关联看板Id
	    	var transferValueList = vue.transferValue;
	    	//查询素材详情
	    	for(var i=0;i<=transferValueList.length-1;i++){
	    		$.ajax({
					url : this.findMaterialByIdUrl,
					type : 'get',
					dataType : 'json',
					async:false,
					data :{
						id:transferValueList[i]
	    		    },
					success : function(data){
						var value = data.data;
						var config={
							materialName : value.name,
							materialId : value.id
						};
						//重新加载table数据
						vue.configTableData.push(config);
					}
				});
	    	}
	    },
	    //打开新增看板配置弹窗
        openAddDialog(){
      	    this.dialogAdd =true;
      	    //加载穿梭框左侧数据
      	    vue.loadMaterialDate();
        },
	    //保存看板配置
	    addConfigList(){
        	//多行配置
        	var configs = [];
        	var materilIds = $("*[name='addConfig.materialId']");
        	var showTypes = $("*[name='addConfig.showType']");
        	var showHour = $("*[name='addConfig.hour']");
        	var showMinute = $("*[name='addConfig.minute']");
        	var showSecond = $("*[name='addConfig.second']");
        	var showDuration = showHour+','+showMinute+","+showSecond;
        	var showOrders = $("*[name='addConfig.showOrder']");
        	var tableTimers = $("*[name='addConfig.tableTimer']");
        	var msg = "";
        	// showHour[i].value + "," + showMinute[i].value + "," + showSecond[i].value ,
        	for(var i=0;i<showTypes.length;i++){
        		if(showTypes[i].value==""){
        			msg += "第" + (i+1) + "行【素材类型】不能为空，请选择<br/>";
        		}
        		var showDuration =  showHour[i].value + "," + showMinute[i].value + "," + showSecond[i].value ;
        		if(showDuration ==",,"){
        			msg += "第" + (i+1) + "行【轮播时长】不能为空，请填写<br/>";
        		}
        		if(showOrders[i].value==""){
        			msg += "第" + (i+1) + "行【轮播顺序】不能为空，请填写<br/>";
        		}
        		if(showTypes[i].value=="table"){
    				if(tableTimers[i].value==""){
    					msg += "第" + (i+1) + "行【报表刷新时间】不能为空，请填写<br/>";
    				}
    			}
        		var config = {
        			pollingConfigId : this.pollingConfigId,
        			showType : showTypes[i].value,
        			showDuration : showDuration ,
        			showOrder : showOrders[i].value,
        			tableTimer : tableTimers[i].value ==null ? "": tableTimers[i].value,
        			materialId : materilIds[i].value
        		};
        		configs.push(config);
        	}
        	
        	
        	if(msg!=""){
	        	this.$alert(msg, '警告', {
	                dangerouslyUseHTMLString: true
	            });
	        	return;
        	}
        	
	    	$.ajax({
	    		url : this.addConfigListUrl,
	    		type : 'post',
	    		dataType : 'json',
	    		contentType: "application/json",
	    		data : JSON.stringify(configs),
	    		success : function(data){
	    			if(data.ok){
	    				vue.successMsg();
	    				vue.dialogAdd = false;
	    				//刷新页面数据
	    				vue.loadConfigData();
	    			}else{
	    				vue.errorMsg();
	    				vue.dialogAdd = false;
	    				vue.loadConfigData();
	    			}
	    		}
	    	});
	    	
	    },
		//打开成功提示
	    successMsg() {
	        this.$message({
		        showClose: true,
		        message: '操作成功',
		        type: 'success'
	        });
		},
		//打开失败提示
	    errorMsg() {
	        this.$message({
		        showClose: true,
		        message: '操作失败',
		        type: 'error'
	        });
		},
		//关闭弹窗
        closeDialog(){
    	    this.dialogEdit = false;
    	    this.dialogAdd = false;
    	    vue.loadConfigData();
        },
        //获取当前行信息
        getConfigData(row){
        	//打开修改弹窗
      	  	this.dialogEdit =true;
      	  	vue.editConfig = row;
        },
        //保存修改
        editForm(){
            //拼接时长
            var hour = this.editConfig.hour==null?"":this.editConfig.hour;
            var minute = this.editConfig.minute==null?"":this.editConfig.minute;
            var second = this.editConfig.second==null?"":this.editConfig.second;
            this.editConfig.showDuration= hour + "," + minute + "," + second;
      	    $.ajax({
  				url : this.editUrl,
  				dataType : 'json',
  				type : 'post',
  				contentType: "application/json",
	    		data : JSON.stringify(this.editConfig),
  				async: false,
  				success : function(data){
  					if(data.ok){
  						vue.dialogEdit = false;
  						vue.successMsg();
  				    	//刷新页面数据
  						vue.loadConfigData();
  					}else{
  						vue.errorMsg();
  						vue.loadConfigData();
  					}
  				}
  		    });
        },
        //删除看板配置
        deleteConfig(index,row,value){
  		  const h = this.$createElement;
  		  this.$msgbox({
  			  title : "警告",
  			  message : h('p', null, [
  	            h('span', null, '你将要删除 '),
  	            h('i', { style: 'color: teal' }, row.showTypeDesc),
  	            h('span', null, ' ！请考虑好再操作！'),
  	          ]),
  	          showCancelButton: true,
  	          confirmButtonText: '确定',
  	          cancelButtonText: '取消',
  	          beforeClose: (action, instance, done) => {
  	              if (action === 'confirm') {
  	                instance.confirmButtonLoading = true;
  	                instance.confirmButtonText = '执行中...';
  	        		$.ajax({
  	        			type : 'get',
  	        			dataType : 'json',
  	        			data : {id : row.id},
  	        			url : this.deleteUrl,
  	        			success : function(data){
  	        				if(data.ok){
  	        					done();
  	        					setTimeout(() => {
  	                				instance.confirmButtonLoading = false;
  	                			}, 300);
  	        				}else{
  	        					setTimeout(() => {
  	                				instance.confirmButtonLoading = false;
  	                			}, 300);
  	    					}
  	        			}
  	        		});
  	              }else{
  	                done();
  	              }
  	          }
  		  }).then(action => {
  	          this.$message({
  	        	  showClose: true,
  	              type: 'success',
  	              message: '操作成功'
  	          });
  	          //刷新页面数据
	          value.splice(index,1);
  	      });
  	  },
  	  
  	  //素材预览
  	  materialReviwe(showType,materialName){
  		  
  		 var url = COMMON_URL.URL;
  		  
  		 if(showType == 'video' || showType == 'ppt'){
  			 url += 'previewVideo';
  		 }else if(showType == 'pic'){
  			 url += 'previewPicture';
  		 }else{
  			 swal('当前只有视频跟图片可以预览','','warning');
  			 return;
  		 }
  		 url += ("?materialName="+materialName);

  		 var iHeight = 500;
  		 var iWidth = 700;
  		 var iTop = (window.screen.height-30-iHeight)/2; //获得窗口的垂直位置;  
  		 var iLeft = (window.screen.width-10-iWidth)/2; //获得窗口的水平位置;  
  		 window.open(url,name,'height='+iHeight+',innerHeight='+iHeight+',width='+iWidth
  				+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft
  				+',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no'); 
  		  
  	  },
  	  
  	  //素材发布
  	  configPush(row){
  		  //修改showOrder为列表最大值+1
  		  $.ajax({
				url : this.configPushUrl,
				dataType : 'json',
				type : 'get',
	    		data : {id:row.id},
				async: false,
				success : function(data){
					if(data.ok){
						vue.successMsg();
				    	//刷新页面数据
						vue.loadConfigData();
					}else{
						vue.errorMsg();
						vue.loadConfigData();
					}
				}
		    });
  		  
  	  },
  	  //素材撤回
  	  configReject(row){
  		  //修改showOrder为-1
  		  $.ajax({
				url : this.configRejectUrl,
				dataType : 'json',
				type : 'get',
	    		data : {id:row.id},
				async: false,
				success : function(data){
					if(data.ok){
						vue.successMsg();
				    	//刷新页面数据
						vue.loadConfigData();
					}else{
						vue.errorMsg();
						vue.loadConfigData();
					}
				}
		    });
  		  
  	  }
        
    }
});

//载入数据
vue.loadConfigData();
